import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import { distriTitleList} from "@/services/ant-design-pro/distribution";
import DistributionMode from "@/pages/distribution/DistributionSetting/components/DistributionMode";
import RebateSettings from "@/pages/distribution/DistributionSetting/components/RebateSettings";
import WithdrawalSettings from "@/pages/distribution/DistributionSetting/components/WithdrawalSettings";

const DistributionSetting = () => {

  const [search, setSearch] = useState('0')
  const [tabList, setTablist] = useState([])
  const componentsAll = [<DistributionMode/>,<RebateSettings/>,<WithdrawalSettings/>]


  useEffect(async ()=>{

    const data=await distriTitleList()
    // 定义表头 数组
    const list = data[0].children.map((item,index)=>{
      return {tab:item.nickname,key:item.id}
    })
    setTablist(list)

  },[search])

  return (
    <PageContainer
      onTabChange={(e)=>{
        let index1 = null
        tabList.forEach((item,index)=>{
          if(item.key == e){
            index1 = index
          }
        })

        setSearch(index1)
      }}
      header={{
        title: tabList[search]?.tab,
        breadcrumb: {}, // 去掉面包屑
      }}
      tabList={tabList}
    >

      {
        componentsAll.filter((item,index)=>{
          if(search == index){
            return true
          }else {
            return false
          }
        })
      }
    </PageContainer>

  );
};

export default DistributionSetting;
